<!-- src/components/ProductCard.vue -->
<template>
  <div
    class="tw-rounded-lg tw-overflow-hidden tw-shadow-md hover:tw-shadow-lg tw-transition-all tw-duration-300 tw-bg-white dark:tw-bg-neutral-800 tw-theme-transition"
  >
    <!-- 卡片图片 -->
    <img
      src="https://picsum.photos/600/400"
      alt="产品图片"
      class="tw-w-full tw-h-48 tw-object-cover"
    />
    <!-- 卡片内容 -->
    <div class="tw-p-4">
      <h2 class="tw-text-lg tw-font-semibold tw-mb-2 tw-text-neutral-900 dark:tw-text-white">
        产品名称
      </h2>
      <p class="tw-text-neutral-600 dark:tw-text-neutral-400 tw-mb-4">
        这是一款高性能产品，支持明暗模式自适应，使用体验流畅。
      </p>
      <!-- 按钮：亮色模式蓝色，暗黑模式深紫色 -->
      <button
        class="tw-w-full tw-py-2 tw-px-4 tw-bg-primary dark:tw-bg-primary-dark tw-text-white tw-rounded-lg hover:tw-bg-primary/90 dark:tw-hover:tw-bg-primary-dark/90 tw-theme-transition"
      >
        查看详情
      </button>
    </div>
  </div>
</template>

<script setup>
// 无需额外逻辑，仅通过 Tailwind 的 dark: 前缀实现样式适配
</script>
